<template>
  <div class="upload">
    <div class="addAttachs">
        <img :src="attachsObj" v-if="attachsObj"/>
        <img src="@/assets/img/userAgent.png" v-else/>
        <div class="loading" v-if="isShowProgress">{{progress}}%</div>
        <el-upload
            style="float: left; height: 40px"
            :show-file-list="false"
            accept=".jpg, .gif, .png, .jpeg"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :disabled="isShowProgress"
            :onProgress="onFileProgress"
            :before-upload="beforeUpload"
            :http-request="uploadRequest">
            <div class="uploadBtn" :style="{'cursor': isShowProgress ? 'not-allowed' : 'pointer'}">上传图片</div>
        </el-upload>
        <div class="line" v-if="attachsObj"></div>
        <div class="deleteBtn" v-if="attachsObj" @click="attachDelFun">删除</div>
      </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { uploadQiniu } from '@/utils/upload'
@Component({
  name: 'UploadImage'
})
export default class UploadImage extends Vue {
    private $message: any
    private fileName = ''
    private isShowProgress: boolean = false
    private progress = 0
    private attachsObj: any = []
    private doMain = ''
    private $store: any

    private createUpload (attachsObj) {
      this.attachsObj = attachsObj
      const initConfig = this.$store.state.common.initConfig
      const doMain = initConfig && initConfig.qiniuDomainMap ? initConfig.qiniuDomainMap.im : ''
      this.doMain = doMain + '/'
    }

    private uploadError () {
      this.$message({ message: '头像上传失败，请重新选择图片上传', type: 'error' })
    }

    private beforeUpload (file: any) {
      const fileName = /[^.]+$/.exec(file.name.replace(/\s/g, ''))
      const filterList = ['jpg', 'gif', 'png', 'jpeg']
      if (fileName && !filterList.includes(fileName[0])) {
        this.$message({ message: '请上传图片格式文件', type: 'error' })
        return false
      }
      this.fileName = file.name.replace(/\s/g, '')
      if (file.size / 1024 / 1024 > 10) {
        this.$message({ message: '附件大小不能超过10M', type: 'error' })
        return false
      } else {
        this.isShowProgress = true
      }
    }

    private attachDelFun () {
      if (this.isShowProgress) {
        return
      }
      this.attachsObj = ''
    }

    private uploadRequest (request: any) {
      uploadQiniu({ type: 'im', fileName: this.fileName }, request)
    }

    private onFileProgress (data: any) {
      this.progress = Math.ceil(data.percent)
    }

    private uploadSuccess (data: any) {
      this.attachsObj = data.key ? `${this.doMain}/${data.key}` : ''
      this.isShowProgress = false
      this.progress = 0
    }
}
</script>

<style lang="stylus" scoped>
.upload
  .addAttachs
    height: 40px
    width: 100%
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 40px
    position: relative
    img
      width: 40px
      height: 40px
      border-radius: 50%
      margin-right: 10px
      float left
    .loading
      width: 40px
      height: 40px
      border-radius: 50%
      position: absolute
      top 0px
      left 0px
      text-align: center
      color #fff
      background: rgba(0,0,0,.3)
    .uploadBtn
      color $c-main
      float: left
    .line
      width: 1px
      height: 10px
      background: #B3B9C7
      float: left
      margin: 15px 10px
    .deleteBtn
      color #FC6B5C
      display: inline-block
      float: left
      cursor pointer
</style>
